<template>
  <div class="addBank">
    <order-nav class="mb-56" :title="$t('添加 Al-Rafidain QiServices')"/>
    <div class="content pr-32 pl-32">
      <c2c-input
          label="Name"
          color="#7B7F87"
          v-model="info.name"
          placeholder="James"
      />
      <c2c-input
          label="Phone Number"
          v-model="info.phone"
          placeholder="Phone Number"
      />
      <c2c-input
          label="Bank Account Number"
          v-model="bankNumber"
          placeholder="Bank Account Number"
      />
      <c2c-input :label="$t('Note（选填）')">
        <textarea
            class="w-full h-240"
            :style="{'background': '#F5F5F5'}"
            v-model="info.desc"
            placeholder="Note"></textarea>
      </c2c-input>
    </div>
    <div class="fixed bottom-0 left-0 w-full pl-32 pr-32 pb-72 box-border">
      <div class="font-24 mb-24" :style="{'color': '#868D9A'}">
        {{ $t('温馨提示：当您出售数字货币时，您选择的收款方式将向买方展示，请确认信息填写准确无误。') }}
      </div>
      <van-button
          v-show="disabled"
          class="w-full"
          type="info"
          @click="save"
      >{{ $t('保存') }}
      </van-button>
      <van-button
          v-show="!disabled"
          disabled
          color="#EAEBEE"
          class="w-full"
      >{{ $t('保存') }}
      </van-button>
    </div>
  </div>
</template>

<script>
import {Button, Toast,} from 'vant';

import OrderNav from "@/components/order-nav/OrderNav";
import C2cInput from "@/page/placeAnOrder/components/c2cInput/C2cInput";

export default {
  name: "CN",
  props: ["data"], // query传参
  data() {
    return {
      disabled: "",
      info: {
        name: "", // 姓名
        number: "", // 银行卡号
        phone: "",
        desc: "", // 支行
      }
    }
  },
  created() {
    console.log(this.data);
    if (this.data) {
      this.info.name = this.data.name;
      this.info.phone = this.data.phone;
      this.info.number = this.data.number;
      this.info.desc = this.data.desc;
    }
  },
  methods: {
    save() {
      Toast(this.$t("保存"))
    }
  },
  computed: {
    bankNumber: {
      get() {
        return this.info.number && this.info.number.replace(/(\d{4})/g, '$1 ').trim()
      },
      set(newVal) {
        this.info.number = newVal;
      }
    },
  },
  components: {
    [Button.name]: Button,
    OrderNav,
    C2cInput,
  },
  watch: {
    // 是否存在空值
    info: {
      deep: true,
      handler() {
        const res = Object.keys(this.info).filter(key => this.info[key] === "" || this.info[key] === undefined)

        this.disabled = res.length === 0;
        console.log(this.disabled)
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.addBank{
  width: 100%;
  box-sizing: border-box;
}
::v-deep {
  .payment-input-wrapper {
    margin-bottom: 60px;

    input {
      height: 100px;
    }
  }
}

.desc {
  width: 100%;
  padding: 46px 24px;
  border-radius: 8px;
  background: #F0F1F4;
}
</style>